<template>
  <div>
    <div class="brand_content">
      <div class="subtitle_context"></div>
      <div class="swiper-tab">
        <div class="brand_box" v-for="(item,index) in brandList">
          <div :class="[currentTab==index?'brand_image_box_click':'brand_image_box']" @click="swichNav(index,item.id)">
            <img :src="item.logo" style="height:100%;width:100%">
          </div>
          <div :class="[currentTab==index?'brand_text':'brand_text_click']">{{item.name}}</div>
        </div>
      </div>
      <div class="brand_item_box">
        <div class="brand_item" v-for="item in products">
          <div class="brand_item_image">
            <img src="http://cdnx.rzico.com/upload/20200511/1.jpg" style="width:100%;height:100%"/>
          </div>
          <div class="brand_item_text">{{item.name}}</div>
          <div class="brand_item_price">¥{{item.price}}</div>
        </div>
        <no-data v-if="products.length==0"></no-data>
      </div>
    </div>
  </div>
</template>

<script>
  import noData from '../product/components/noData'
  import { list } from '../../../../api/brand'
  import { productList } from '../../../../api/product'
  import utils from '../../../../utils/utils'

  export default {
    name: 'brand',
    data() {
      return {
        tagIds: [],
        brandId: '',
        currentTab: 0,
        brandList: [],
        brandProducts: [],
        products: []
      }
    },
    props: [
      'content'
    ],
    methods: {
      loadProduct() {
        let params = new URLSearchParams()
        params.append('brandId', this.brandId)
        productList(params).then(response => {
          this.products = response.data.data
        })
      },
      loadBrand() {
        if (!utils.isNull(this.content.tagids)) {
          this.tagIds = this.content.tagids.split(',')
          for (var i = 0; i < this.tagIds.length; i++) {
            this.tagIds[i] = parseInt(this.tagIds[i])
          }
        }
        let params = new URLSearchParams()
        for (var i = 0; i < this.tagIds.length; i++) {
          params.append('tagIds', this.tagIds[i])
        }
        list(params).then(response => {
          response.data.data.forEach(item=>{
            if (utils.isNull(item.logo)){
              item.logo='http://cdnx.hulu.fj.cn/00/0F/rBD_P13SAWKAMlqMAAAVjZ8qOaY963.jpg'
            }

          })
          this.brandList = response.data.data
          this.brandId = response.data.data[0].id
        })
        setTimeout(() => {
          this.loadProduct()
        }, 1000)

      },
      swichNav: function(index, brandId) {
        var that = this
        this.brandId = brandId
        this.loadProduct()
        if (that.currentTab === index) {
          return false
        } else {
          this.currentTab = index
        }
      }
    },
    created() {
      this.loadBrand()
    },
    components: {
      noData
    }
  }
</script>

<style scoped>
  /* pages/index/acrossBrand/acrossBrand.wxss */
  .brand_content {
    margin-left: 10px;
    width: 355px;
    border-radius: 8px;
    display: flex;
    background-color: white;
    flex-direction: column;
    padding: 10px;
    overflow: hidden;
    margin-top: 10px;
  }

  .brand_tittle_content {
    display: flex;
    justify-content: space-between;
  }

  .tittle {
    height: 17px;
    font-weight: 500;
    color: rgba(26, 26, 30, 1);
  }

  .subtitle_context {
    margin-top: 5px;
  }

  .subtitle_text {
    height: 11.5px;
    font-size: 12px;
    font-weight: 400;
    color: rgba(26, 26, 30, 0.5);
  }


  .hidden_swiper {
    overflow: hidden;
    margin-bottom: 12px;
  }

  .swiper-tab {
    width: 100%;
    text-align: center;
    overflow-x: auto;
    display: flex;
    height: 85px;
  }

  .swiper-tab-list {
    width: 110px;
    height: 68px;
    border: 1px solid rgba(213, 70, 51, 1);
    border-radius: 3px;
    flex-shrink: 0;
  }

  .on {
    color: blue;
    border-bottom: 3px solid blue;
  }

  .swiper-box {
    display: block;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  .swiper-box view {
    text-align: center;
  }

  .brand_image_box :last-child {
    margin-right: 0px;
  }

  .brand_box {
    width: 110px;
    display: flex;
    flex-direction: column;
    margin-right: 25px;
  }

  .brand_image_box {
    width: 55px;
    height: 34px;
    border: 1px solid rgba(209, 209, 211, 1);
    border-radius: 3px;
    padding: 5px 5px 5px 5px;
  }

  .brand_text {
    font-size: 12px;
    font-weight: 500;
    color: rgba(215, 38, 28, 1);
    line-height: 36px;
    margin-top: 7.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 55px;
  }

  .brand_text_click {
    margin-top: 7.5px;
    font-size: 12px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
    line-height: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 55px;
  }

  .brand_image_box_click {
    width: 55px;
    height: 34px;
    border: 1px solid rgba(213, 70, 51, 1);
    border-radius: 3px;
    padding: 5px 5px 5px 5px;
  }

  .hidden_brand_box {
    height: 340px;
    overflow: hidden;
    margin-bottom: 20px;
  }

  .brand_item_box {
    /*overflow-x: auto;*/
    display: flex;
    /*height: 180px;*/
    margin-top: 10px;
  }

  .brand_item {
    margin-right: 12px;
    /*width: 206px;*/

  }

  .brand_item_image {
    width: 103px;
    height: 103px;
    background: linear-gradient(180deg, rgba(244, 243, 245, 1) 0%, rgba(250, 250, 250, 1) 100%);
    border-radius: 4px;
  }

  .brand_item_text {
    width: 96px;
    font-size: 12px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
    line-height: 18px;
    margin-top: 9.5px;
    min-height: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .brand_item_price {
    height: 11.5px;
    font-size: 10px;
    font-weight: bold;
    color: rgba(231, 91, 83, 1);
    margin-top: 9px;
  }

  .demo-text-1 {
    background-color: aqua;
  }

  .demo-text-2 {
    background-color: black;
  }

  .demo-text-1 {
    background-color: gold;
  }

  .page-section-spacing {
    margin-top: 60px;
  }

</style>
